<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}
		#allmap {margin-right: 300px;height: 100%;overflow: hidden;}
		#result {border-left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;font-size:12px;}
		dl,dt,dd,ul,li{
			margin:0;
			padding:0;
			list-style:none;
		}
		p{font-size:12px;}
		dt{
			font-size:14px;
			font-family:"微软雅黑";
			font-weight:bold;
			border-bottom:1px dotted #000;
			padding:5px 0 5px 5px;
			margin:5px 0;
		}
		dd{
			padding:5px 0 0 5px;
		}
		li{
			line-height:28px;
		}
		.search-box{padding:10px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=5f0a64d9a35585f654535b3a8fc8d800"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
	<title>百度地图绘制多边形</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">	
    <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>

<div id="result">
	<div class="search-box"><input class="search-input" type="text" placeholder="输入关键字，回车搜索......" onkeyup="search(this, event)"/></div>
    <dl>
    	<dt>覆盖物操作</dt>
        <dd>
            <ul>
                <li>
                    <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/></BR>
                    <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
                </li>
            </ul>
        </dd>
    </dl>
	<dl>
    	<dt>覆盖物信息</dt>
        <dd>
            <ul>
                <li id="panel"></li>
            </ul>
        </dd>
    </dl>
</div>

<script type="text/javascript">

    var map = new BMap.Map('map');
    map.centerAndZoom("南京", 12);
    map.enableScrollWheelZoom();
	
	var bdary = new BMap.Boundary();
	bdary.get("夫子庙", function(rs){       //获取行政区域
		map.clearOverlays();        //清除地图覆盖物       
		var count = rs.boundaries.length; //行政区域的点有多少个
		for(var i = 0; i < count; i++){
			var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
			map.addOverlay(ply);  //添加覆盖物
			map.setViewport(ply.getPath());    //调整视野         
		}                
	}); 
    
    var overlays = [];
	
    //回调获得覆盖物信息
    var overlaycomplete = function(e){
	    $("panel").innerHTML = "<textarea id='lnglats' style='width:250px;height:100px'></textarea>";
        overlays.push(e.overlay);
        var result = '';
		var points = "";
        result = '<p>';
        result += e.drawingMode + ":";
        if (e.drawingMode == BMAP_DRAWING_MARKER) {
            result += ' 坐标：' + e.overlay.getPosition().lng + ',' + e.overlay.getPosition().lat;
        }
        if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
            result += ' 半径：' + e.overlay.getRadius();
			result += '<p>';
            result += ' 中心点：' + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat;
			result += '<p>';
			result += ' 面积：' + e.calculate;
        }
        if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {
            result += ' 所画的点个数：' + e.overlay.getPath().length;
			result += '<p>';
			result += ' 点序列：';
			var pointArr = e.overlay.getPath();
			
			for(i=0; i<pointArr.length; i++){
				result += pointArr[i].lng + ',' + pointArr[i].lat;
				result += '<p>';
				points += pointArr[i].lng + ',' + pointArr[i].lat + ';';
			}
			
			if(e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE){
				result += ' 面积：' + e.calculate;
			}
        }
        result += "</p>";
        $("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板

			document.getElementById('lnglats').value = points;
    };
	
	function getArrMaxMin(arr,minOrMax){
		var rtnVal = arr[0];
		//遍历数组，查询出最大最小值
		for(var i=1;i<arr.length;i++){ 
			if(minOrMax == 'max'){
				if(rtnVal<arr[i])rtnVal=arr[i];
			}else if(minOrMax == 'min'){
				if(rtnVal>arr[i])rtnVal=arr[i];
			}
		  
		}
		return rtnVal;
	}

    var styleOptions = {
        strokeColor:"#2674A8",    //边线颜色。
        fillColor:"#2674A8",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
		enableCalculate: true,
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            //offset: new BMap.Size(5, 5), //偏离值
            scale: 0.7, //工具栏缩放比例
			drawingModel : [
            BMAP_DRAWING_MARKER,
            BMAP_DRAWING_RECTANGLE 
            ]
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });
	
	/*var myDrawingManagerObject = new BMapLib.DrawingManager(map, {isOpen: true, 
    drawingType: BMAP_DRAWING_MARKER,
    enableCalculate: false,
    drawingToolOptions: {
        drawingTypes : [
            BMAP_DRAWING_MARKER,
            BMAP_DRAWING_CIRCLE,
            BMAP_DRAWING_POLYLINE,
            BMAP_DRAWING_POLYGON,
            BMAP_DRAWING_RECTANGLE 
         ]
    },
    polylineOptions: {
        strokeColor: "#333"
    });*/

    
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);

    function $(id){
        return document.getElementById(id);
    }

    function clearAll() {
        for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0;
		$("panel").innerHTML="";
    }
    
    function search(obj, e){
    	var keycode = e.keyCode;
    	if (keycode != 13) {
    		return;
    	}
    
    	var key = obj.value;
    	
    	var local = new BMap.LocalSearch(map, {
    		renderOptions:{map: map}
    	});
    	local.search(key);
    }
</script>

</body>
</html>
</script>